<link rel="StyleSheet" href="../css/mystore.css" type="text/css" media="screen"/>
<iframe th:replace="common/top.html" width="100%" frameborder="0" scrolling="yes" class="x-iframe"></iframe>

<div id="Content">

    <div id="Catalog" class="Catalog">
        <!-- 覆盖层 -->
<!--        <div class="login-bg"></div>-->

<!--        <table>-->
<!--            <div class="bar">Please choose a consignee</div>-->
<!--            <span class="close">x</span>-->
<!--            <div class="selectAddress_list">-->
<!--                <div class="addressItem chooseItem" th:each="consignee:${consigneeList}">-->
<!--                    <div name="firstName" class="detail" th:text="${consignee.firstName}"></div>-->
<!--                    <div name="lastName" class="detail" th:text="${consignee.lastName}"></div>-->
<!--                    <div name="address1" class="detail" th:text="${consignee.address1}"></div>-->
<!--                    <div name="address2" class="detail" th:text="${consignee.address2}"></div>-->
<!--                    <div name="city" class="detail" th:text="${consignee.city}"></div>-->
<!--                    <div name="state" class="detail" th:text="${consignee.state}"></div>-->
<!--                    <div name="zip" class="detail" th:text="${consignee.zip}"></div>-->
<!--                    <div name="country" class="detail" th:text="${consignee.country}"></div>-->
<!--                    <div class="address-operator">-->
<!--                        <span class="link edit_address">edit</span>-->
<!--                        <span class="link delete_address">delete</span>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="addressItem" id="add_new_consignee">-->
<!--                    <div class="add_address">-->
<!--                        <i class="fa fa-plus"></i>-->
<!--                        <div class="addNew">Add new consignee</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="new_address_detail">-->
<!--                    <span class="tip">Please enter new consignee info</span>-->
<!--                    <ul class="detailList">-->
<!--                        <li class="item">First name:<input type="text" class="firstname"></li>-->
<!--                        <li class="item">Last name:<input type="text" class="lastname"></li>-->
<!--                        <li class="item">Address 1:<input type="text" class="address1"></li>-->
<!--                        <li class="item">Address 2:<input type="text" class="address2"></li>-->
<!--                        <li class="item">City:<input type="text" class="city"></li>-->
<!--                        <li class="item">State:<input type="text" class="state"></li>-->
<!--                        <li class="item">Zip:<input type="text" class="zip"></li>-->
<!--                        <li class="item">Country:<input type="text" class="country"></li>-->
<!--                    </ul>-->

<!--                    <button type="submit" id="add" class="btn">Add new consignee</button>-->
<!--                    <button class="btn">Cancel</button>-->
<!--                </div>-->
<!--            </div>-->
<!--        </table>-->


        <form action="/confirmOrder" method="post">


            <table>
                <tr>
                    <th colspan=2>Payment Details</th>
                </tr>
                <tr>
                    <td>Card Type:</td>
                    <td>
                        <select name="order.cardType" class="select-group">

                            <option value="Visa" selected="selected">Visa</option>
                            <option value="MasterCard">MasterCard</option>
                            <option value="American Express">American Express</option>

                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Card Number:</td>
                    <td>
                        <input type="text" name="order.creditCard">* Use a fake
                        number!</td>
                </tr>
                <tr>
                    <td>Expiry Date (MM/YYYY):</td>
                    <td><input type="text" name="order.expiryDate" value="12/03"></td>
                </tr>
                <tr>
                    <th colspan=2>Billing Address <span class="change_address"> switch to other Address</span></th>
                </tr>

                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="order.billToFirstName" th:value="${session.order.billToFirstName}" id="firstName"></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="order.billToLastName" th:value="${session.order.billToLastName}" id="lastName"></td>
                </tr>
                <tr>
                    <td>Address 1:</td>

                    <td><input type="text" size="40" name="order.billAddress1" th:value="${session.order.billAddress1}" id="address1"></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" size="40" name="order.billAddress2" th:value="${session.order.billAddress2}" id="address2"></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="order.billCity" th:value="${session.order.billCity}" id="city"></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" size="4" name="order.billState" th:value="${session.order.billState}" id="state"></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" size="10" name="order.billZip" th:value="${session.order.billZip}" id="zip"></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" size="15" name="order.billCountry" th:value="${session.order.billCountry}" id="country"></td>
                </tr>

                <tr>
                    <td colspan=2><input type="checkbox" name="shippingAddressRequired">
                        Ship to different address...</td>
                </tr>

            </table>

            <input type="submit" name="confirmOrder" value="Continue" class="btn">

        </form></div>
</div>
<script src="../js/address.js" type="text/JavaScript"></script>
<iframe th:replace="common/bottom.html" width="100%" frameborder="0" scrolling="yes" class="x-iframe"></iframe>
